<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" v-if="vasee">
			<block slot="right">
				<view class="flex" style="margin-right: 25rpx" @tap="Establish()">
					<image style="width:50rpx; height: 50rpx; z-index: 999" src="/static/tabbar/factory/7370.png">
					</image>
				</view>
			</block>
		</hx-navbar>
		<!-- 	<view>
			<u-loading-page :loading="load" bg-color="#e5e5e5" loading-mode="semicircle" loading-text="加载中......">
			</u-loading-page>
		</view> -->
		<l-file ref="lFile" :logo="logo" @up-success="onSuccess"></l-file>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" :style="'width: 100%;height:'+windowHeight+'px;'" scroll-y="true"
				:scroll-with-animation="scrollAnimation" :scroll-into-view="scrollToView"
				:refresher-enabled="isOpenRefresh" refresher-background="" @refresherrefresh="onRefresh"
				@refresherabort="onAbort" :scroll-top="scrollTop" :refresher-threshold="40"
				:refresher-triggered="triggered" @refresherrestore="onRestore" @scroll="scrollTopFild"
				@scrolltolower="scrolltolower">
				<view style="height: 50rpx;"></view>
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.createTime">
					<!-- 用户消息 -->
					<block>
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.name==name">
							<view v-if="row.msgType==4" class="bubble">
								<rich-text :nodes="row.content"></rich-text>
							</view>
							<view v-if="row.msgType==2" class="bubble voice" @tap="playVoice(row)">
								<view class="length">{{row.audioTime}}</view>
								<view class="icon my-voice" v-if="playMsgid != row.createTime"></view>
								<image src="../../static/cliend/leftRadio.gif" mode=""
									style="width: 55rpx;height: 55rpx;" v-else></image>
							</view>
							<view v-if="row.msgType==3" class="bubble img" @tap="showPic(row.content,index)"
								style="background-color:#bfbfbf;border-radius: 20rpx;">
								<image :src="row.content" style="border-radius: 20rpx;" mode="aspectFill">
								</image>
							</view>
							<!-- 报价单消息 -->
							<view class="quotation flex flex-direction justify-center" v-if="row.msgType==1"
								@click="open(row.content)">
								<view class="flex justify-between quotation-view">
									<view style="color: #1E1E1E;">账目表</view>
									<view style="color: #492D22;">点击查看</view>
								</view>
							</view>
							<view class="right">
								<image :src="row.name==name? row.avatar : row.receiveAvatar"></image>
							</view>

							<!-- 						<view class="left">
								<view v-if="row.type==4" class="bubble">
									<rich-text :nodes="row.content"></rich-text>
								</view>
								<view v-if="row.type== 3" class="bubble voice" @tap="playVoice(row)"
									:class="playMsgid == row.createTime?'play':''">
									<view class="length">{{row.audioTime}}</view>
									<view class="icon my-voice"></view>
								</view>
								<view v-if="row.type==2" class="bubble img" @tap="showPic(row)">
									<image :src="row.fileUrl" />
								</view>
							</view> -->
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="row.name!=name">
							<!-- 左-头像 -->
							<view class="left">
								<image :src="row.name!=name? row.avatar : row.receiveAvatar"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{row.name}}</view>
									<view class="time">{{row.createTime}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.msgType==4" class="bubble">
									<rich-text :nodes="row.content"></rich-text>
								</view>
								<!-- 语音消息 -->
								<view v-if="row.msgType==2" class="bubble voice" @tap="playVoice(row)">
									<view class="icon other-voice" v-if="playMsgid != row.createTime"></view>
									<image src="../../static/cliend/rightRadio.gif" mode=""
										style="width: 55rpx;height: 55rpx;" v-else></image>
									<view class="length">{{row.audioTime}}</view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msgType==3" class="bubble img" @tap="showPic(row.content,index)"
									style="background-color:#FFFFFF;border-radius: 20rpx;">
									<image :src="row.content" style="border-radius: 20rpx;" mode="aspectFill">
									</image>
								</view>
								<!-- 文件消息 -->
								<view class="quotation flex flex-direction justify-center" v-if="row.msgType==1"
									@click="open(row.content)">
									<view class="flex justify-between quotation-view">
										<view style="color: #1E1E1E;">账目表</view>
										<view style="color: #492D22;">点击查看</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view style="height: 30rpx;"></view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<!-- <swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'/static/HM/img/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper> -->
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="getImage(1)">
						<view class="icon tupian2"></view>
						<view>相册</view>
					</view>

					<view class="box" @tap="getImage(2)">
						<view class="icon paizhao"></view>
						<view>拍照</view>
					</view>
					<view class="box" @tap="onUpload(1)">
						<u-icon name="gift-fill" class="icon" size="43" color="#000"></u-icon>
						<view>发送文件</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view>
			<view class="flex align-center"
				style="padding-left:20rpx;width: 100vw;background:#badaf8 ;position: relative;z-index: 99999;"
				v-if="newMessage!=''">
				<image :src="newMessage.avatar" mode="aspectFit"
					style="height:50rpx;width: 50rpx;border-radius: 50%;line-height:50rpx;">
				</image>
				<view style="margin-left: 15rpx;">{{newMessage.name}}:</view>
				<view style="margin-left: 15rpx;">{{newMessage.content}}</view>
			</view>
			<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
				<!-- H5下不能录音，输入栏布局改动一下 -->
				<!-- #ifndef H5 -->
				<view class="voice">
					<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="more" @tap="showMore">
					<view class="icon add"></view>
				</view>
				<!-- #endif -->
				<view class="textbox">
					<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
						@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
						@touchcancel="voiceCancel">{{voiceTis}}</view>
					<view class="text-mode" :class="isVoice?'hidden':''">
						<view class="box">
							<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" />
						</view>
						<!-- <view class="em" @tap="chooseEmoji">
							<view class="icon biaoqing"></view>
						</view> -->
					</view>
				</view>
				<!-- #ifndef H5 -->
				<view class="more" @tap="showMore">
					<view class="icon add"></view>
				</view>
				<!-- #endif -->
				<view class="send" :class="isVoice?'hidden':''" @click="sendText">
					<view class="btn">发送</view>
				</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64
	} from '@/common/jsdck/index.js'
	import {
		webScroct,
		ws
	} from "@/common/webscroct.js"
	import {
		disposeTime,
		repairZero,
		deepClone
	} from '@/uni_modules/y-chat/components/y-chat/common.js'
	import baseUrl from '@/common/config.js'
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "群聊",
					rightSlot: true,

				},
				load: true,
				windowHeight: '',
				scrollAnimation: false,
				scrollToView: '',
				isOpenRefresh: true, // 是否开启下拉
				triggered: false,
				// Socket连接状态
				IsOpen: false,
				// SocketTask
				SocketTask: false,
				// 是否上线
				IsOnline: false,
				//错误重连次数
				errorSocket: 0,
				scrollTop: 40,
				Isfreshing: false,
				msgList: [],
				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				isVoice: false,
				//表情定义
				hideEmoji: true,
				// more参数
				hideMore: true,
				// 抽屉参数
				popupLayerClass: '',
				recordTis: "手指上滑 取消发送",
				voiceTis: '按住 说话',
				willStop: false,
				recording: false,
				//文字消息
				textMsg: '',
				userData: {},
				// 自己的名字
				name: '',
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				initPoint: {
					identifier: 0,
					Y: 0
				},
				groupNum: '',
				yoyo: null,
				quote: '', //文件地址
				playMsgid: null,
				groupNum: '',
				pageNum: 1,
				pages: null,
				pageSize: 10,
				userVos: {},
				newMessage: '',
				vasee: true,
				logo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F00%2F07%2F155788a6d8a5c42.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619847627&t=2da40b583002205c204d980b54b35040',
			}
		},
		onLoad(e) {
			this.config.title = this.$cache.get('cf')
			this.readMessagese(e.groupNum)
			this.groupNum = e.groupNum
			this.userVos = this.$cache.get('cscs')
			console.log(this.userVos, '玫琳凯模拟')
			this.openSocket(e.groupNum);
			uni.getSystemInfo({
				success: res => {
					let height = res.windowHeight;
					// #ifndef H5
					height -= 45;
					// #endif
					height = height - res.safeAreaInsets.bottom - 45 - 50;
					this.windowHeight = height;
					console.log(this.windowHeight, '自行车自行车')
				}
			})
			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
		},
		onHide() {
			this.vasee = false
		},
		onShow() {
			this.$nextTick(() => {
				this.config.title = this.$cache.get('cf')
				this.vasee = true
			})
			this.messageHistory()
			this.name = this.$cache.get('name')
		},
		onUnload() {
			console.log("页面卸载")
			this.IsOnline = false
			uni.closeSocket();
		},
		methods: {
			readMessagese(e) {
				let data = {
					groupNum: e
				}
				this.$api.readMessage(data).then((res) => {
					console.log(res, '肖瑶是帅哥')
				})
			},
			/*
			打开文件
			*/
			open(filePath) {
				let file = filePath
				let system = uni.getSystemInfoSync().platform;
				if (system == 'ios') {
					file = encodeURI(file);
				}
				uni.downloadFile({
					url: file,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			scrolltolower() {
				this.newMessage = ''
			},
			/*
			打开文件
			*/
			open(filePath) {
				let file = filePath
				let system = uni.getSystemInfoSync().platform;
				if (system == 'ios') {
					file = encodeURI(file);
				}
				uni.downloadFile({
					url: file,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			scrolltolower() {
				this.newMessage = ''
			},
			// 项目群聊设置
			Establish() {
				this.$tools.goPageNoAuth('./groupChatEstablish?groupNum=' + this.groupNum)
			},

			messageHistory() {
				let data = {
					pageSize: this.pageSize,
					pageNo: this.pageNum,
					groupNum: this.groupNum
				}
				console.log('data', data)
				this.$api.messageHistory(data).then((res) => {
					console.log(res.data.result, '自行车自行车这些')
					this.pages = res.data.result.pages,
						this.pageNum = res.data.result.pageNo
					console.log(this.userVos, '积极哦');
					res.data.result.list.forEach((item) => {
						this.userVos.forEach((dar) => {
							if (item.sendId == dar.id && item.sendType == dar.type) {
								item.name = dar.name
								item.avatar = dar.avatar
							}
						})
						item.createTime = disposeTime(item.createTime)
					})
					if (res.data.result.pages == 1) {
						this.msgList = res.data.result.list
					} else {
						let a = res.data.result.list
						let b = this.msgList
						this.msgList = [...a, ...b]
					}
					console.log(this.msgList, '达瓦达瓦')
					this.load = false
					// // 滚动到底部
					this.scrollTop = -1
					this.$nextTick(() => {
						this.scrollAnimation = true;
					})

				})
			},
			onRefresh() {
				if (this.Isfreshing) return;
				this.Isfreshing = true;
				if (!this.triggered) //保证刷新状态下，triggered为true
					this.triggered = true;

				if (this.pages == this.pageNum) {
					this.$tools.showToast('再拉砍你哦~')
					this.messageHistory()
				}
				if (this.pages >= 1) {
					this.pageNum++
				}
				setTimeout(() => {
					this.triggered = false; //触发onRestore，关闭刷新图标
					this.Isfreshing = false;
					this.messageHistory()
				}, 1200)
			},
			/* 上传 */
			onUpload(e) {
				console.log(uni.getStorageSync('token'), 'xxx')
				/**
				 * url：上传接口地址
				 * name：附件key,服务端根据key值获取文件流，默认file,上传文件的key
				 * header: 上传接口请求头
				 */
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: 'http://www.cohome.com.cn/api/universal/uploadCloud',
					// 服务端接收附件的key
					name: 'file',
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					header: {
						'Authorization': uni.getStorageSync('token'),
						// 'Content-Type':'multipart/form-data'
						// 'Content-type': 'application/x-www-form-urlencoded;',
						// 'Content-type': 'application/json',
						// 'uid': '27682',
						// 'client': 'app',
					},
					// 限制选择附件的大小上限，默认10M
					// maxSize: 20,

					// 若需要在body单独添加附件名或附件大小如下方式传入组件：
					// addName: 'file',
					// addSize: '后端要的附件大小字段key'

					// body参数直接写key,value,如：
					// date: '2020-1-1',
					exce: e,
					type: 1
					// key2: 'value2',
				});
			},
			// 预览图片
			showPic(msg, index) {
				let arr = [msg]
				uni.previewImage({
					indicator: "none",
					urls: arr
				});
			},
			// 播放语音
			playVoice(e) {
				this.yoyo = e.content
				this.playMsgid = e.createTime;
				this.AUDIO.src = e.content;
				console.log('e.content', e.content);
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			//录音结束(回调文件)
			recordEnd(e) {
				if (!this.willStop) {

					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.radioUploadFile(msg)
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			//选照片 or 拍照
			async getImage(type) {
				this.hideDrawer();
				let file = await this.$tools.chooseImg(type, 1, 1)
				let fileUrl = await this.$tools.uploadFile(file[0].path, 2)
				let data = {
					content: 'http://' + fileUrl,
					createTime: new Date().getTime(),
					msgType: 3,
					sendId: this.$cache.get('id'),
					type: this.$cache.get('type'),
					name: this.$cache.get('name'),
					avatar: this.$cache.get('avatar')

				}
				let data2 = JSON.stringify(data)
				uni.sendSocketMessage({
					data: data2,
					success: (res) => {
						console.log('结果', res)
					},
					fail: (error) => {
						console.log(error, '失败回调')
					}
				});
				this.addImgMsg(data, 3)
			},
			textareaFocus() {
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
				}
			},
			// 结束录音
			voiceEnd(e) {
				console.log("录音结束")
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			// 录音开始
			voiceBegin(e) {
				console.log("开始录音")
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			// 发送文字消息
			sendText() {
				console.log("进入消息")
				this.hideDrawer(); //隐藏抽屉
				if (!this.textMsg) {
					return;
				}
				let data = {
					content: this.textMsg,
					msgType: 4,
					sendId: this.$cache.get('id'),
					type: this.$cache.get('type'),
					createTime: new Date().getTime(),
					name: this.$cache.get('name'),
					avatar: this.$cache.get('avatar')

				}
				this.screenMsg(data);
				data = JSON.stringify(data);
				uni.sendSocketMessage({
					data: data,
					complete: (res) => {
						console.log('调用完毕', res)
					}
				});
				this.textMsg = ''; //清空输入框

			},
			// 接受消息(筛选处理)
			screenMsg(msg) {
				//从长连接处转发给这个方法，进行筛选处理
				// 用户消息
				switch (msg.msgType) {
					case 1:
						this.addRedEnvelopeMsg(msg);
						break;
					case 3:
						this.addImgMsg(msg);
						break;
						//发送语音
					case 2:
						this.addVoiceMsg(msg);
						break;
						//发送文字
					case 4:
						this.addRedEnvelopeMsg(msg);
						break;
				}
				console.log('用户消息123');
				uni.vibrateLong();
				this.$nextTick(function() {
					// 滚动到底
					this.scrollToView = 'msg' + msg.createTime
				});
				this.$forceUpdate()
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				this.msgList.push(msg);
				this.$forceUpdate()
			},
			//发送文字
			addRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				this.msgList.push(msg);
				console.log('滚动的msg', msg)
				this.$nextTick(() => {
					// 滚动到底
					this.scrollToView = 'msg' + JSON.parse(msg).createTime
				});
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			async radioUploadFile(msg) {
				let radio = await this.$tools.uploadFile(msg.url, 3)
				let data = {
					type: this.$cache.get('type'),
					msgType: 2,
					sendId: this.$cache.get('id'),
					content: 'http://' + radio,
					audioTime: msg.length,
					name: this.$cache.get('name'),
					avatar: this.$cache.get('avatar'),
					createTime: new Date().getTime(),
				}
				let data2 = JSON.stringify(data);
				console.log('data', data)
				uni.sendSocketMessage({
					data: data2,
					success: (res) => {
						this.screenMsg(data);
					},
					fail: (error) => {
						console.log(eror, '错误回调');
					},
					complete: (res) => {
						console.log('执行完毕', res)
					}
				});
			},
			// 切换语音/文字输入
			switchVoice() {
				this.hideDrawer();
				this.isVoice = this.isVoice ? false : true;
			},
			//更多功能(点击+弹出)
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 自定义下拉刷新被中止
			discard() {
				return;
			},
			onAbort() {
				console.error("onAbort");
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			chatFunction() {
				this.$tools.goPageNoAuth('./ChatFunction?data=' + this.sessionId)
			},
			//上传回调
			onSuccess(res) {
				this.quote = 'http://' + res.data.result
				let data = {
					content: 'http://' + res.data.result,
					msgType: 1,
					sendId: this.$cache.get('id'),
					type: this.$cache.get('type'),
					createTime: new Date().getTime(),
					name: this.$cache.get('name'),
					avatar: this.$cache.get('avatar')
				}
				let data2 = JSON.stringify(data)
				uni.sendSocketMessage({
					data: data2,
					success: (res) => {
						console.log('结果', res)
					},
					fail: (error) => {
						console.log(error, '失败回调')
					}
				});
				this.screenMsg(data);
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
				}, 150);
			},
			scrollTopFild(e) {
				// this.scrollTop = e.tatarget.scrollTop
			},
			//获取服务端消息并渲染到页面上
			getMessageSend(e) {
				let a = JSON.parse(e.data)
				console.log('接收消息1', a);
				let msg = {
					// id: lastid,
					name: a.name,
					avatar: a.avatar,
					createTime: disposeTime(a.createTime),
					type: a.type,
					audioTime: a.audioTime,
					msgType: a.msgType,
					content: a.content
				}
				this.screenMsg(msg);
				this.newMessage = msg
				// this.quotationId = Number(a.quotationId)
			},
			openSocket(e) {
				// 防止重复连接
				if (this.IsOpen) return
				let token = uni.getStorageSync("token")
				let url = ws + webScroct + '/websocket/groupContent/' + token + "/" + e
				this.uuu = url
				console.log('url', url)
				// 连接
				this.SocketTask = uni.connectSocket({
					url: url,

					fail(e) {
						console.log("连接失败")
					},
					success() {
						console.log("连接成功")
					},
					complete: () => {}
				});
				if (!this.SocketTask) return;
				// 监听开启
				this.SocketTask.onOpen(() => {
					// 将连接状态设为已连接
					console.log('将连接状态设为已连接');
					this.errorSocket = 0
					this.IsOpen = true
					this.IsOnline = true
				})
				// 监听关闭
				this.SocketTask.onClose(() => {
					this.IsOpen = false;
					if (!this.IsOnline) {
						// uni.closeSocket();
					} else {
						console.log('socket重连中....');
						this.errorSocket++;
						// this.openSocket();
						// if (this.errorSocket >= 3) {
						// 	console.log("this.errorSocket", this.errorSocket);
						// 	uni.showToast({
						// 		title: "服务器连接失败，请返回上个页面重试",
						// 		duration: 3000,
						// 		icon: none
						// 	})
						// 	console.log('socket重连达到上限');
						// 	uni.closeSocket();
						// 	this.IsOnline = false
						// }
					}
				})
				// 监听错误
				this.SocketTask.onError(() => {
					// this.
					console.log('连接错误');
					this.IsOpen = false;
					// 	if (!this.IsOnline) {
					// 		console.log('连接已关闭');
					// 		uni.closeSocket();
					// 	} else {
					// 		this.errorSocket++;
					// 		this.openSocket();

					// 	}
				})
				// 监听接收信息
				this.SocketTask.onMessage((e) => {
					this.getMessageSend(e)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style.scss";

	uni-page-wrapper {
		height: auto !important;
	}

	.bubble {
		max-width: 70%;
		min-height: 50rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		word-break: break-word;
		background-color: #f06c7a;
		color: #fff;
	}

	.random {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(180deg, rgba(255, 98, 98, 1) 0%, rgba(255, 51, 51, 1) 100%);
		border-radius: 50%;
		box-shadow: 0px 6px 9px 0px rgba(255, 221, 221, 1);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 230rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 330rpx;
		/*  #endif */
	}

	.upload {
		width: 690rpx;
		height: 120rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 2rpx solid #492D22;
		color: #492D22;
		font-size: 32rpx;
		padding: 36rpx 0;
		margin: 30rpx auto;
	}

	.selected {
		width: 690rpx;
		height: 112rpx;
		margin: 20rpx 30rpx 30rpx 0;
		border-radius: 20rpx;
		border: 5rpx solid #492D22;
	}

	.sess {
		width: 690rpx;
		height: 112rpx;
		margin: 20rpx 30rpx 30rpx 0;
		border-radius: 20rpx;
		border: 1rpx solid #7A6A56;
	}

	.quotation {
		width: 400rpx;
		height: 200rpx;
		background: #FFFFFF;
	}

	.quotation-view {
		width: 350rpx;
		height: 169rpx;
		text-align: center;
		align-items: center;
		padding: 20rpx 40rpx;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 10rpx;
		margin: 20rpx auto;
	}

	.senghome {
		width: 404rpx;
		height: 124rpx;
		background: #492D22;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}

	.installInvitation {
		width: 228rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #492D22;
		color: #FFFFFF;
		text-align: center;
		margin-left: 30rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.times {
		width: 690rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		opacity: 1;
		margin: 30rpx 0;
		border: 2rpx solid #492D22;
	}
</style>